<!--
=========================================================
 Material Dashboard - v2.1.1
=========================================================

 Product Page: https://www.creative-tim.com/product/material-dashboard
 Copyright 2019 Creative Tim (https://www.creative-tim.com)
 Licensed under MIT (https://github.com/creativetimofficial/material-dashboard/blob/master/LICENSE.md)

 Coded by Creative Tim

=========================================================

 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
  <div class="container">
    <span class="skiplink-text">Skip to main content</span>
  </div>
</a>
<header class="navbar navbar-expand navbar-dark bg-primary flex-column flex-md-row bd-navbar">
  <a class="navbar-brand mr-0 mr-md-2 navbar-absolute-logo" href="https://www.creative-tim.com/product/material-dashboard" target="_blank">
    材料仪表板
  </a>
  <ul class="navbar-nav flex-row d-none d-md-flex">
    <!-- <li class="nav-item">
      <a class="nav-link p-2" href="#version">
        2.1.1
      </a>
    </li> -->
    <li class="nav-item dropdown">
      <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        v2.1.1
      </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
        <a class="dropdown-item active" href="../../../../docs/2.1/getting-started/introduction.html">BS4 - 2.1.1</a>
        <a class="dropdown-item" href="../../../../docs/2.0/getting-started/introduction.html">BS4 - 2.1.0</a>
        <a class="dropdown-item" href="https://demos.creative-tim.com/bs3/material-dashboard/documentation/tutorial-components.html" target="_blank">BS3 - 1.0</a>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link p-2" href="https://github.com/creativetimofficial/material-dashboard" target="_blank" rel="noopener" aria-label="GitHub">
        <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
          <title>GitHub</title>
          <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd" />
        </svg>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link p-2" href="https://twitter.com/CreativeTim" target="_blank" rel="noopener" aria-label="Twitter">
        <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false">
          <title>Twitter</title>
          <path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor" />
        </svg>
      </a>
    </li>
  </ul>
  <div class="navbar-nav-scroll ml-md-auto ">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item">
        <a class="nav-link" href="https://www.creative-tim.com/product/material-dashboard"> <i class="material-icons">card_membership</i> 升级到专业版 </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://demos.creative-tim.com/material-dashboard/examples/dashboard.html"><i class="material-icons">view_carousel</i> 实时预览</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://github.com/creativetimofficial/material-dashboard" target="_blank" rel="noopener"><i class="material-icons">star</i>
          帮助明星
        </a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-item nav-link dropdown-toggle mr-md-2" href="introduction.html#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded=" ">
          <i class="material-icons">translate </i>
          中文
        </a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
          <a class="dropdown-item active  dropdown-flag-holder" href="#">
            中文
          </a>
          <a class="dropdown-item dropdown-flag-holder" href="../../../../docs/2.1/getting-started/introduction.html">ENGLISH
          </a>
          <a class="dropdown-item dropdown-flag-holder" href="../../../../ja/docs/2.1/getting-started/introduction.html">日本人
          </a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="" target="_blank" rel="noopener"></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="" target="_blank" rel="noopener"></a>
      </li>
    </ul>
  </div>
  <a href="https://github.com/creativetimofficial/material-dashboard" class="github-corner" aria-label="View source on Github">
    <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#9c27b0; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
      <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
      <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
    </svg></a>
  <style>
    .github-corner:hover .octo-arm {
      animation: octocat-wave 560ms ease-in-out
    }

    @keyframes octocat-wave {

      0%,
      100% {
        transform: rotate(0)
      }

      20%,
      60% {
        transform: rotate(-25deg)
      }

      40%,
      80% {
        transform: rotate(10deg)
      }
    }

    @media (max-width:500px) {
      .github-corner:hover .octo-arm {
        animation: none
      }

      .github-corner .octo-arm {
        animation: octocat-wave 560ms ease-in-out
      }
    }
  </style>
</header>
<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <nav class="collapse bd-links" id="bd-docs-nav">
        <div class="bd-toc-item active">
          <a class="bd-toc-link" href="#docs">
            入门
          </a>
          <ul class="nav bd-sidenav">
            <li class="">
              <a href="../../../../zh/docs/2.1/getting-started/introduction.html">
                介绍
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/getting-started/license.html">
                执照
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/getting-started/file-structure.html">
                文件结构
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/getting-started/build-tools.html">
                构建工具
              </a>
            </li>
          </ul>
        </div>
        <div class="bd-toc-item active">
          <a class="bd-toc-link" href="#docs">
            组件
          </a>
          <ul class="nav bd-sidenav">
            <li class="">
              <a href="../../../../zh/docs/2.1/components/alerts.html">
                警报
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/badge.html">
                徽章
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/breadcrumb.html">
                面包屑
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/buttons.html">
                纽扣
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/card.html">
                卡
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/carousel.html">
                圆盘传送带
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/collapse.html">
                坍方
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/dropdowns.html">
                下拉菜单
              </a>
            </li>
            <li class="active bd-sidenav-active">
              <a href="../../../../zh/docs/2.1/components/forms.html">
                形式
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/google-maps.html">
                谷歌地图
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/info-areas.html">
                信息区域
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/material-icons.html">
                材料图标
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/modal.html">
                语气
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/navs.html">
                资产净值
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/navbar.html">
                导航栏
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/pagination.html">
                分页
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/parallax.html">
                视差
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/popovers.html">
                约夏克布丁
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/progress.html">
                进展
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/tables.html">
                表
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/tooltips.html">
                提示
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/components/typography.html">
                活版印刷
              </a>
            </li>
          </ul>
        </div>
        <div class="bd-toc-item active">
          <a class="bd-toc-link" href="#docs">
            插件
          </a>
          <ul class="nav bd-sidenav">
            <li class="">
              <a href="../../../../zh/docs/2.1/plugins/bootstrap-notify.html">
                Bootstrap通知
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/plugins/perfect-scrollbar.html">
                完美的滚动条
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/plugins/bootstrap-switch.html">
                自举开关
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/plugins/datetimepicker.html">
                的DateTimePicker
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/plugins/fullcalendar.html">
                完整日历
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/plugins/jvector-map.html">
                jVector地图
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/plugins/sweet-alert-2.html">
                甜蜜警报
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/plugins/jquery-validation.html">
                JQuery 验证
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/plugins/fileupload-jasny.html">
                上传文件 Jasny
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/plugins/jquery-tagsinput.html">
                jQuery Tagsinput
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/plugins/select-bootstrap.html">
                选择Bootstrap
                <span class="badge badge-primary">临</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../zh/docs/2.1/plugins/sliders.html">
                滑块
                <span class="badge badge-primary">临</span>
              </a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
    <div class="d-none d-xl-block col-xl-2 bd-toc">
      <ul class="section-nav">
        <li class="toc-entry toc-h2"><a href="#概观">概观</a></li>
        <li class="toc-entry toc-h2"><a href="#表格控件">表格控件</a>
          <ul>
            <li class="toc-entry toc-h3"><a href="#只读">只读</a></li>
          </ul>
        </li>
        <li class="toc-entry toc-h2"><a href="#例子">例子</a></li>
        <li class="toc-entry toc-h2"><a href="#复选框和收音机">复选框和收音机</a>
          <ul>
            <li class="toc-entry toc-h3"><a href="#默认堆叠">默认（堆叠）</a></li>
            <li class="toc-entry toc-h3"><a href="#排队">排队</a></li>
          </ul>
        </li>
        <li class="toc-entry toc-h2"><a href="#布局">布局</a>
          <ul>
            <li class="toc-entry toc-h3"><a href="#表格网格">表格网格</a></li>
            <li class="toc-entry toc-h3"><a href="#表格行">表格行</a></li>
          </ul>
        </li>
        <li class="toc-entry toc-h2"><a href="#残疾人表格">残疾人表格</a>
          <ul>
            <ul>
              <li class="toc-entry toc-h4"><a href="#警告与锚">警告与锚</a></li>
              <li class="toc-entry toc-h4"><a href="#跨浏览器兼容性">跨浏览器兼容性</a></li>
            </ul>
            <li class="toc-entry toc-h3"><a href="#文件浏览器">文件浏览器</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
      <div class="row mt-4">
        <a class="btn btn-default btn-sm ml-auto" href="https://github.com/creativetimofficial/material-dashboard-docs/edit/master/zh/docs/2.1/components/forms.html" target="_blank">编辑于 Github</a>
      </div>
      <h1 class="bd-title" id="content">
        形式
      </h1>
      <p class="bd-lead">用于创建各种表单的表单控件样式，布局选项和自定义组件的示例和使用指南。</p>
      <h2 id="概观">概观</h2>
      <p>确保在所有输入上使用适当的<code class="highlighter-rouge">type</code>属性（例如，电子邮件地址的<code class="highlighter-rouge">email</code>或数字信息的<code class="highlighter-rouge">number</code>）以利用更新的输入控件，如电子邮件验证，数字选择等。</p>
      <p>这是一个演示Bootstrap表单样式的简单示例。继续阅读有关所需类，表单布局等的文档。</p>
      <div class="bd-example" data-example-id="">
        <form>
          <div class="form-group">
            <label for="exampleInputEmail1">电子邮件地址</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" />
            <small id="emailHelp" class="form-text text-muted">我们绝不会与其他任何人分享您的电子邮件。</small>
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">密码</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" />
          </div>
          <div class="form-check">
            <label class="form-check-label">
              <input class="form-check-input" type="checkbox" value="" />
              选项一是这个
              <span class="form-check-sign">
                <span class="check"></span>
              </span>
            </label>
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;form&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"exampleInputEmail1"</span><span class="nt">&gt;</span>电子邮件地址<span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleInputEmail1"</span> <span class="na">aria-describedby=</span><span class="s">"emailHelp"</span> <span class="na">placeholder=</span><span class="s">"Enter email"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;small</span> <span class="na">id=</span><span class="s">"emailHelp"</span> <span class="na">class=</span><span class="s">"form-text text-muted"</span><span class="nt">&gt;</span>我们绝不会与其他任何人分享您的电子邮件。<span class="nt">&lt;/small&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"exampleInputPassword1"</span><span class="nt">&gt;</span>密码<span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleInputPassword1"</span> <span class="na">placeholder=</span><span class="s">"Password"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span><span class="nt">&gt;</span>
  选项一是这个
          <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">&gt;</span>
              <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">&gt;&lt;/span&gt;</span>
          <span class="nt">&lt;/span&gt;</span>
      <span class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;/div&gt;</span>

  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Submit<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/form&gt;</span></code></pre>
      </div>
      <h2 id="表格控件">表格控件</h2>
      <p>文本形式控件 - 如<code class="highlighter-rouge">&lt;input&gt;</code>s，<code class="highlighter-rouge">&lt;select&gt;</code>s和<code class="highlighter-rouge">&lt;textarea&gt;</code>s - 用<code class="highlighter-rouge">.form-control</code>类设置样式。包括用于一般外观，焦点状态，尺寸调整等的样式。</p>
      <p>一定要探索我们的[自定义表单]（#custom-forms）来进一步设置<code class="highlighter-rouge">&lt;select&gt;</code>的样式。</p>
      <div class="bd-example" data-example-id="">
        <form>
          <div class="form-group">
            <label for="exampleFormControlInput1">电子邮件地址</label>
            <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com" />
          </div>
          <div class="form-group">
            <label for="exampleFormControlSelect1">示例选择</label>
            <select class="form-control selectpicker" data-style="btn btn-link" id="exampleFormControlSelect1">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </div>
          <div class="form-group">
            <label for="exampleFormControlSelect2">示例多选</label>
            <select multiple="" class="form-control selectpicker" data-style="btn btn-link" id="exampleFormControlSelect2">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </div>
          <div class="form-group">
            <label for="exampleFormControlTextarea1">示例Textarea</label>
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
          </div>
        </form>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;form&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"exampleFormControlInput1"</span><span class="nt">&gt;</span>电子邮件地址<span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleFormControlInput1"</span> <span class="na">placeholder=</span><span class="s">"name@example.com"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"exampleFormControlSelect1"</span><span class="nt">&gt;</span>示例选择<span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;select</span> <span class="na">class=</span><span class="s">"form-control selectpicker"</span> <span class="na">data-style=</span><span class="s">"btn btn-link"</span> <span class="na">id=</span><span class="s">"exampleFormControlSelect1"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;option&gt;</span>1<span class="nt">&lt;/option&gt;</span>
      <span class="nt">&lt;option&gt;</span>2<span class="nt">&lt;/option&gt;</span>
      <span class="nt">&lt;option&gt;</span>3<span class="nt">&lt;/option&gt;</span>
      <span class="nt">&lt;option&gt;</span>4<span class="nt">&lt;/option&gt;</span>
      <span class="nt">&lt;option&gt;</span>5<span class="nt">&lt;/option&gt;</span>
    <span class="nt">&lt;/select&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"exampleFormControlSelect2"</span><span class="nt">&gt;</span>示例多选<span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;select</span> <span class="na">multiple</span> <span class="na">class=</span><span class="s">"form-control selectpicker"</span> <span class="na">data-style=</span><span class="s">"btn btn-link"</span> <span class="na">id=</span><span class="s">"exampleFormControlSelect2"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;option&gt;</span>1<span class="nt">&lt;/option&gt;</span>
      <span class="nt">&lt;option&gt;</span>2<span class="nt">&lt;/option&gt;</span>
      <span class="nt">&lt;option&gt;</span>3<span class="nt">&lt;/option&gt;</span>
      <span class="nt">&lt;option&gt;</span>4<span class="nt">&lt;/option&gt;</span>
      <span class="nt">&lt;option&gt;</span>5<span class="nt">&lt;/option&gt;</span>
    <span class="nt">&lt;/select&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"exampleFormControlTextarea1"</span><span class="nt">&gt;</span>示例Textarea<span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;textarea</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleFormControlTextarea1"</span> <span class="na">rows=</span><span class="s">"3"</span><span class="nt">&gt;&lt;/textarea&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/form&gt;</span></code></pre>
      </div>
      <p>对于文件输入, 交换 该<code class="highlighter-rouge">.form-control</code> for <code class="highlighter-rouge">.form-file-upload</code> and <code class="highlighter-rouge">.form-file-simple</code> or <code class="highlighter-rouge">.form-file-multiple</code>.</p>
      <div class="bd-example" data-example-id="">
        <div class="form-group form-file-upload form-file-simple">
          <input type="text" class="form-control inputFileVisible" placeholder="Simple chooser..." />
          <input type="file" class="inputFileHidden" />
        </div>
        <div class="form-group form-file-upload form-file-multiple">
          <input type="file" multiple="" class="inputFileHidden" />
          <div class="input-group">
            <input type="text" class="form-control inputFileVisible" placeholder="Single File" />
            <span class="input-group-btn">
              <button type="button" class="btn btn-fab btn-round btn-primary">
                <i class="material-icons">attach_file</i>
              </button>
            </span>
          </div>
        </div>
        <div class="form-group form-file-upload form-file-multiple">
          <input type="file" multiple="" class="inputFileHidden" />
          <div class="input-group">
            <input type="text" class="form-control inputFileVisible" placeholder="Multiple Files" multiple="" />
            <span class="input-group-btn">
              <button type="button" class="btn btn-fab btn-round btn-info">
                <i class="material-icons">layers</i>
              </button>
            </span>
          </div>
        </div>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group form-file-upload form-file-simple"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control inputFileVisible"</span> <span class="na">placeholder=</span><span class="s">"Simple chooser..."</span><span class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">class=</span><span class="s">"inputFileHidden"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/div&gt;</span>

  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group form-file-upload form-file-multiple"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">multiple=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"inputFileHidden"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control inputFileVisible"</span> <span class="na">placeholder=</span><span class="s">"Single File"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-btn"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-fab btn-round btn-primary"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>attach_file<span class="nt">&lt;/i&gt;</span>
            <span class="nt">&lt;/button&gt;</span>
        <span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>

  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group form-file-upload form-file-multiple"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">multiple=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"inputFileHidden"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control inputFileVisible"</span> <span class="na">placeholder=</span><span class="s">"Multiple Files"</span> <span class="na">multiple</span><span class="nt">&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-btn"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-fab btn-round btn-info"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>layers<span class="nt">&lt;/i&gt;</span>
            <span class="nt">&lt;/button&gt;</span>
        <span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span></code></pre>
      </div>
      <h3 id="只读">只读</h3>
      <p>在输入上添加<code class="highlighter-rouge">readonly</code>布尔属性以防止修改输入的值。只读输入显得更轻（就像禁用输入一样），但保留标准光标。</p>
      <div class="bd-example" data-example-id="">
        <input class="form-control" type="text" placeholder="Readonly input here…" readonly="" />
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Readonly input here…"</span> <span class="na">readonly</span><span class="nt">&gt;</span></code></pre>
      </div>
      <h2 id="例子">例子</h2>
      <div class="bd-example" data-example-id="">
        <div class="form-group label-floating has-success">
          <label class="control-label">成功输入</label>
          <input type="text" value="Success" class="form-control" />
          <span class="form-control-feedback">
            <i class="material-icons">done</i>
          </span>
        </div>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group label-floating has-success"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"control-label"</span><span class="nt">&gt;</span>成功输入<span class="nt">&lt;/label&gt;</span>
          <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">value=</span><span class="s">"Success"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-control-feedback"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>done<span class="nt">&lt;/i&gt;</span>
    <span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/div&gt;</span></code></pre>
      </div>
      <div class="bd-example" data-example-id="">
        <div class="form-group label-floating has-danger">
          <label class="control-label">错误 输入</label>
          <input type="email" value="Error Input" class="form-control" />
          <span class="material-icons form-control-feedback">clear</span>
        </div>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group label-floating has-danger"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"control-label"</span><span class="nt">&gt;</span>错误 输入<span class="nt">&lt;/label&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">value=</span><span class="s">"Error Input"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="nt">/&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"material-icons form-control-feedback"</span><span class="nt">&gt;</span>clear<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/div&gt;</span></code></pre>
      </div>
      <div class="bd-example" data-example-id="">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text">
              <i class="material-icons">group</i>
            </span>
          </div>
          <input type="text" class="form-control" placeholder="With Material Icons" />
        </div>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>group<span class="nt">&lt;/i&gt;</span>
      <span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"With Material Icons"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/div&gt;</span></code></pre>
      </div>
      <div class="bd-example" data-example-id="">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text">
              <i class="fa fa-group"></i>
            </span>
          </div>
          <input type="text" class="form-control" placeholder="With Font Awesome Icons" />
        </div>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-group"</span><span class="nt">&gt;&lt;/i&gt;</span>
      <span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"With Font Awesome Icons"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/div&gt;</span></code></pre>
      </div>
      <h2 id="复选框和收音机">复选框和收音机</h2>
      <p>在.form-check`的帮助下改进了默认复选框和无线电，这两种输入类型的单个类改善了HTML元素的布局和行为。 复选框用于选择列表中的一个或多个选项，而无线电用于从多个选项中选择一个选项。</p>
      <p>支持禁用复选框和无线电，但是为了在父“<label>”的悬停上提供一个“不允许”的光标，你需要将<code class="highlighter-rouge">.disabled</code>类添加到父<code class="highlighter-rouge">.form-check</code>。 禁用的类也会减轻文本颜色以帮助指示输入的状态。</label></p>
      <h3 id="默认堆叠">默认（堆叠）</h3>
      <p>默认情况下，任意数量的立即兄弟的复选框和无线电将垂直堆叠，并用<code class="highlighter-rouge">.form-check</code>间隔。</p>
      <div class="bd-example" data-example-id="">
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" type="checkbox" value="" />
            选项一是这个和那个＆mdash;一定要包括为什么它很棒
            <span class="form-check-sign">
              <span class="check"></span>
            </span>
          </label>
        </div>
        <div class="form-check disabled">
          <label class="form-check-label">
            <input class="form-check-input" type="checkbox" value="" disabled="" />
            选项二是禁用
            <span class="form-check-sign">
              <span class="check"></span>
            </span>
          </label>
        </div>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span><span class="nt">&gt;</span>
选项一是这个和那个＆mdash;一定要包括为什么它很棒
        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">&gt;&lt;/span&gt;</span>
        <span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check disabled"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span> <span class="na">disabled</span><span class="nt">&gt;</span>
选项二是禁用
        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">&gt;&lt;/span&gt;</span>
        <span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
      </div>
      <div class="bd-example" data-example-id="">
        <div class="form-check form-check-radio">
          <label class="form-check-label">
            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" />
            收音机关闭
            <span class="circle">
              <span class="check"></span>
            </span>
          </label>
        </div>
        <div class="form-check form-check-radio">
          <label class="form-check-label">
            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2" checked="" />
            收音机开启
            <span class="circle">
              <span class="check"></span>
            </span>
          </label>
        </div>
        <div class="form-check form-check-radio disabled">
          <label class="form-check-label">
            <input class="form-check-input" type="radio" name="exampleRadios1" id="exampleRadios1" value="option1" disabled="" />
            已禁用广播已关闭
            <span class="circle">
              <span class="check"></span>
            </span>
          </label>
        </div>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check form-check-radio"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"exampleRadios"</span> <span class="na">id=</span><span class="s">"exampleRadios1"</span> <span class="na">value=</span><span class="s">"option1"</span> <span class="nt">&gt;</span>
 收音机关闭
        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"circle"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">&gt;&lt;/span&gt;</span>
        <span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check form-check-radio"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"exampleRadios"</span> <span class="na">id=</span><span class="s">"exampleRadios2"</span> <span class="na">value=</span><span class="s">"option2"</span> <span class="na">checked</span><span class="nt">&gt;</span>
   收音机开启
        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"circle"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">&gt;&lt;/span&gt;</span>
        <span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check form-check-radio disabled"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"exampleRadios1"</span> <span class="na">id=</span><span class="s">"exampleRadios1"</span> <span class="na">value=</span><span class="s">"option1"</span> <span class="na">disabled</span><span class="nt">&gt;</span>
  已禁用广播已关闭
        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"circle"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">&gt;&lt;/span&gt;</span>
        <span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
      </div>
      <h3 id="排队">排队</h3>
      <p>通过将<code class="highlighter-rouge">.form-check-inline</code>添加到任何<code class="highlighter-rouge">.form-check</code>，在同一水平行上对复选框或无线电进行分组。</p>
      <div class="bd-example" data-example-id="">
        <div class="form-check form-check-inline">
          <label class="form-check-label">
            <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1" /> 1
            <span class="form-check-sign">
              <span class="check"></span>
            </span>
          </label>
        </div>
        <div class="form-check form-check-inline">
          <label class="form-check-label">
            <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2" /> 2
            <span class="form-check-sign">
              <span class="check"></span>
            </span>
          </label>
        </div>
        <div class="form-check form-check-inline disabled">
          <label class="form-check-label">
            <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled="" /> 3
            <span class="form-check-sign">
              <span class="check"></span>
            </span>
          </label>
        </div>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check form-check-inline"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"inlineCheckbox1"</span> <span class="na">value=</span><span class="s">"option1"</span><span class="nt">&gt;</span> 1
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check form-check-inline"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"inlineCheckbox2"</span> <span class="na">value=</span><span class="s">"option2"</span><span class="nt">&gt;</span> 2
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check form-check-inline disabled"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"inlineCheckbox3"</span> <span class="na">value=</span><span class="s">"option3"</span> <span class="na">disabled</span><span class="nt">&gt;</span> 3
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
      </div>
      <div class="bd-example" data-example-id="">
        <div class="form-check form-check-radio form-check-inline">
          <label class="form-check-label">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" /> 1
            <span class="circle">
              <span class="check"></span>
            </span>
          </label>
        </div>
        <div class="form-check form-check-radio form-check-inline">
          <label class="form-check-label">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" /> 2
            <span class="circle">
              <span class="check"></span>
            </span>
          </label>
        </div>
        <div class="form-check form-check-radio form-check-inline disabled">
          <label class="form-check-label">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled="" /> 3
            <span class="circle">
              <span class="check"></span>
            </span>
          </label>
        </div>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check form-check-radio form-check-inline"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"inlineRadioOptions"</span> <span class="na">id=</span><span class="s">"inlineRadio1"</span> <span class="na">value=</span><span class="s">"option1"</span><span class="nt">&gt;</span> 1
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"circle"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check form-check-radio form-check-inline"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"inlineRadioOptions"</span> <span class="na">id=</span><span class="s">"inlineRadio2"</span> <span class="na">value=</span><span class="s">"option2"</span><span class="nt">&gt;</span> 2
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"circle"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check form-check-radio form-check-inline disabled"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"inlineRadioOptions"</span> <span class="na">id=</span><span class="s">"inlineRadio3"</span> <span class="na">value=</span><span class="s">"option3"</span> <span class="na">disabled</span><span class="nt">&gt;</span> 3
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"circle"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
      </div>
      <h2 id="布局">布局</h2>
      <p>由于Bootstrap将<code class="highlighter-rouge">display：block</code>和<code class="highlighter-rouge">width：100％</code>应用于几乎所有的表单控件，因此表单默认垂直堆叠。 可以使用其他类来基于每个表单更改此布局。</p>
      <h3 id="表格网格">表格网格</h3>
      <p>可以使用我们的网格类构建更复杂的表单。 将这些用于需要多列，不同宽度和其他对齐选项的表单布局。</p>
      <div class="bd-example" data-example-id="">
        <form>
          <div class="row">
            <div class="col">
              <input type="text" class="form-control" placeholder="名字" />
            </div>
            <div class="col">
              <input type="text" class="form-control" placeholder="姓" />
            </div>
          </div>
        </form>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;form&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"名字"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"姓"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/form&gt;</span></code></pre>
      </div>
      <h3 id="表格行">表格行</h3>
      <p>您也可以将.row换成.form-row，这是我们标准网格行的一种变体，它覆盖了默认的列装订线，以实现更紧凑，更紧凑的布局。</p>
      <div class="bd-example" data-example-id="">
        <form>
          <div class="form-row">
            <div class="col">
              <input type="text" class="form-control" placeholder="名字" />
            </div>
            <div class="col">
              <input type="text" class="form-control" placeholder="姓" />
            </div>
          </div>
        </form>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;form&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"名字"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"姓"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/form&gt;</span></code></pre>
      </div>
      <p>More complex layouts can also be created with the grid system.</p>
      <div class="bd-example" data-example-id="">
        <form>
          <div class="form-row">
            <div class="form-group col-md-6">
              <label for="inputEmail4">电子邮件</label>
              <input type="email" class="form-control" id="inputEmail4" placeholder="Email" />
            </div>
            <div class="form-group col-md-6">
              <label for="inputPassword4">密码</label>
              <input type="password" class="form-control" id="inputPassword4" placeholder="Password" />
            </div>
          </div>
          <div class="form-group">
            <label for="inputAddress">地址</label>
            <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St" />
          </div>
          <div class="form-group">
            <label for="inputAddress2">地址 2</label>
            <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor" />
          </div>
          <div class="form-row">
            <div class="form-group col-md-6">
              <label for="inputCity">市</label>
              <input type="text" class="form-control" id="inputCity" />
            </div>
            <div class="form-group col-md-3">
              <label for="inputState">州</label>
              <select id="inputState" class="form-control">
                <option selected="">选择...</option>
                <option>...</option>
              </select>
            </div>
            <div class="form-group col-md-2 ml-auto">
              <label for="inputZip">压缩</label>
              <input type="text" class="form-control" id="inputZip" />
            </div>
          </div>
          <div class="form-group">
            <div class="form-check">
              <label class="form-check-label">
                <input class="form-check-input" type="checkbox" value="" />
                对我进行检查
                <span class="form-check-sign">
                  <span class="check"></span>
                </span>
              </label>
            </div>
          </div>
          <button type="submit" class="btn btn-primary">登入</button>
        </form>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;form&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group col-md-6"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"inputEmail4"</span><span class="nt">&gt;</span>电子邮件<span class="nt">&lt;/label&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputEmail4"</span> <span class="na">placeholder=</span><span class="s">"Email"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group col-md-6"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"inputPassword4"</span><span class="nt">&gt;</span>密码<span class="nt">&lt;/label&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputPassword4"</span> <span class="na">placeholder=</span><span class="s">"Password"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"inputAddress"</span><span class="nt">&gt;</span>地址<span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputAddress"</span> <span class="na">placeholder=</span><span class="s">"1234 Main St"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"inputAddress2"</span><span class="nt">&gt;</span>地址 2<span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputAddress2"</span> <span class="na">placeholder=</span><span class="s">"Apartment, studio, or floor"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group col-md-6"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"inputCity"</span><span class="nt">&gt;</span>市<span class="nt">&lt;/label&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputCity"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group col-md-3"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"inputState"</span><span class="nt">&gt;</span>州<span class="nt">&lt;/label&gt;</span>
      <span class="nt">&lt;select</span> <span class="na">id=</span><span class="s">"inputState"</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;option</span> <span class="na">selected</span><span class="nt">&gt;</span>选择...<span class="nt">&lt;/option&gt;</span>
        <span class="nt">&lt;option&gt;</span>...<span class="nt">&lt;/option&gt;</span>
      <span class="nt">&lt;/select&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group col-md-2 ml-auto"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"inputZip"</span><span class="nt">&gt;</span>压缩<span class="nt">&lt;/label&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputZip"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span><span class="nt">&gt;</span>
     对我进行检查
          <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">&gt;&lt;/span&gt;</span>
          <span class="nt">&lt;/span&gt;</span>
      <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>登入<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/form&gt;</span></code></pre>
      </div>
      <h2 id="残疾人表格">残疾人表格</h2>
      <p>在输入上添加<code class="highlighter-rouge">disabled</code>布尔属性以防止用户交互并使其显得更轻。</p>
      <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"disabledInput"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Disabled input here..."</span> <span class="na">disabled</span><span class="nt">&gt;</span></code></pre>
      </figure>
      <p>在输入上添加<code class="highlighter-rouge">disabled</code>布尔属性以防止用户交互并使其显得更轻。</p>
      <div class="bd-example" data-example-id="">
        <form>
          <fieldset disabled="">
            <div class="form-group">
              <label for="disabledTextInput"> 禁用输入</label>
              <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input" />
            </div>
            <div class="form-group">
              <label for="disabledSelect">禁用选择菜单</label>
              <select id="disabledSelect" class="form-control">
                <option></option>
              </select>
            </div>
            <div class="form-check">
              <label class="form-check-label">
                <input class="form-check-input" type="checkbox" value="" />
                不能检查我
                <span class="form-check-sign">
                  <span class="check"></span>
                </span>
              </label>
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
          </fieldset>
        </form>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;form&gt;</span>
  <span class="nt">&lt;fieldset</span> <span class="na">disabled</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"disabledTextInput"</span><span class="nt">&gt;</span> 禁用输入<span class="nt">&lt;/label&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"disabledTextInput"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Disabled input"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"disabledSelect"</span><span class="nt">&gt;</span>禁用选择菜单<span class="nt">&lt;/label&gt;</span>
      <span class="nt">&lt;select</span> <span class="na">id=</span><span class="s">"disabledSelect"</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;option&gt;&lt;/option&gt;</span>
      <span class="nt">&lt;/select&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span><span class="nt">&gt;</span>
     不能检查我
          <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">&gt;&lt;/span&gt;</span>
          <span class="nt">&lt;/span&gt;</span>
      <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>提交<span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;/fieldset&gt;</span>
<span class="nt">&lt;/form&gt;</span></code></pre>
      </div>
      <div class="bd-callout bd-callout-warning">
        <h4 id="警告与锚">警告与锚</h4>
        <p>默认情况下，浏览器会将<code class="highlighter-rouge">&lt;fieldset disabled&gt;</code>中的所有本机表单控件（<code class="highlighter-rouge">&lt;input&gt;</code>，<code class="highlighter-rouge">&lt;select&gt;</code>和<code class="highlighter-rouge">&lt;button&gt;</code>元素）视为已禁用，从而阻止键盘和鼠标之间的交互。 但是，如果您的表单还包含<code class="highlighter-rouge">&lt;a ... class="btn btn- "&gt;</code>元素，那么这些元素只会被赋予<code class="highlighter-rouge">pointer-events：none</code>样式。 正如关于[按钮的禁用状态]（{{site.baseurl}} docs {{site.docs_version}}组件按钮#disable-state）（特别是锚元素的子部分）中所述，此CSS 属性尚未标准化，并且在Opera 18及更低版本或Internet Explorer 10中不完全受支持，并且不会阻止键盘用户关注或激活这些链接。 因此，为了安全起见，请使用自定义JavaScript来禁用此类链接。</p>
      </div>
      <div class="bd-callout bd-callout-danger">
        <h4 id="跨浏览器兼容性">跨浏览器兼容性</h4>
        <p>虽然Bootstrap将在所有浏览器中应用这些样式，但Internet Explorer 11及更低版本不完全支持<code class="highlighter-rouge">&lt;fieldset&gt;</code>上的<code class="highlighter-rouge">disabled</code>属性。 使用自定义JavaScript在这些浏览器中禁用字段集。</p>
      </div>
      <h3 id="文件浏览器">文件浏览器</h3>
      <div class="bd-example" data-example-id="">
        <div class="fileinput fileinput-new text-center" data-provides="fileinput">
          <div class="fileinput-new thumbnail img-raised">
            <img src="http://style.anu.edu.au/_anu/4/images/placeholders/person_8x10.png" alt="..." />
          </div>
          <div class="fileinput-preview fileinput-exists thumbnail img-raised"></div>
          <div>
            <span class="btn btn-raised btn-round btn-default btn-file">
              <span class="fileinput-new">选择图像</span>
              <span class="fileinput-exists">更改</span>
              <input type="file" name="..." />
            </span>
            <a href="#pablo" class="btn btn-danger btn-round fileinput-exists" data-dismiss="fileinput"><i class="fa fa-times"></i> Remove</a>
          </div>
        </div>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"fileinput fileinput-new text-center"</span> <span class="na">data-provides=</span><span class="s">"fileinput"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"fileinput-new thumbnail img-raised"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"http://style.anu.edu.au/_anu/4/images/placeholders/person_8x10.png"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"fileinput-preview fileinput-exists thumbnail img-raised"</span><span class="nt">&gt;&lt;/div&gt;</span>
    <span class="nt">&lt;div&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"btn btn-raised btn-round btn-default btn-file"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"fileinput-new"</span><span class="nt">&gt;</span>选择图像<span class="nt">&lt;/span&gt;</span>
            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"fileinput-exists"</span><span class="nt">&gt;</span>更改<span class="nt">&lt;/span&gt;</span>
            <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">name=</span><span class="s">"..."</span> <span class="nt">/&gt;</span>
        <span class="nt">&lt;/span&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#pablo"</span> <span class="na">class=</span><span class="s">"btn btn-danger btn-round fileinput-exists"</span> <span class="na">data-dismiss=</span><span class="s">"fileinput"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-times"</span><span class="nt">&gt;&lt;/i&gt;</span> Remove<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
      </div>
      <p>如果您想查看更多示例和属性，请查看官方 <strong><a href="http://getbootstrap.com/docs/4.0/components/forms/" target="_blank">Bootstrap Documentation</a></strong>.</p>
    </main>
  </div>
</div>